<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <el-col>操作</el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- //放置el-tree组件 -->
        <el-tree
          :data="list"
          :props="defaultProps"
          :default-expand-all="true"
        ><!-- 作用域插槽 data拿到的是每一个子节点的对象 -->
          <!--
      什么时候用到作用域插槽？父组件中如果想使用子组件中的数据进行自定义内容的渲染 (table 单元格数据渲染)
    -->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          @click.native="addDepartment(data)"
                        >添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="editDepartment(data)">编辑部门</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="delPart(data.id)"
                        >删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template></el-tree>
      </el-card>
    </div>
    <!-- 添加子部门组件 -->
    <!-- 组件一旦在模板区域渲染 mounted钩子函数就会执行 接口就会发起 -->
    <add-department
      ref="addDepartment"
      :show-dialog="showDialog"
      :cur-data="curDate"
      :code-list="codeList"
      @close-dialog="closeDialog"
      @update-list="loadDepartmentList"
    />
  </div>
</template>

<script>
import { getDepartments, delDepartments } from '@/api/departments.js'
import { transTreeData } from '@/utils/transTreeData.js'
import AddDepartment from './components/add-department'
export default {
  components: {
    AddDepartment
  },
  data() {
    return {
      // 依赖一份树形数据
      list: [],
      defaultProps: {
        label: 'name'
      },
      showDialog: false, // 控制新增弹出
      curDate: null, // 暂存点击了哪一项
      codeList: [] // code组成的数组
    }
  },
  mounted() {
    this.loadDepartmentList()
  },
  methods: {
    // 加载列表数据
    async loadDepartmentList() {
      const data = await getDepartments()
      this.list = transTreeData(data.data.depts)
      this.codeList = data.data.depts.map((item) => {
        return item.code
      })
    },
    // 删除部门
    delPart(id) {
      this.$confirm('你确认要进行删除么?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // 删除操作成功
          await delDepartments(id)
          // 添加提示
          this.$message.success('删除操作成功')
          // 更新数据
          this.loadDepartmentList()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 添加部门
    addDepartment(curDate) {
      console.log(curDate)
      this.showDialog = true
      this.curDate = curDate
    },
    // 关闭弹出层
    closeDialog() {
      this.showDialog = false
    },
    // 编辑部门
    editDepartment(curDate) {
      // 打开弹出层
      this.showDialog = true
      // 记录当前点击项
      this.curDate = curDate
      // 利用ref调用子组件中的方法
      this.$refs.addDepartment.getDetail(this.curDate.id)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
